<template>
  <el-button
    class="icon-switch"
    type="primary"
    circle
    :plain="!checked"
    @click="onChangeChecked"
  >
    <icon-svg :iconName="iconName" :fill="checked ? '#fff' : '#333'"></icon-svg>
  </el-button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "IconSwitch",
  props: {
    checked: {
      type: Boolean,
    },
    iconName: {
      type: String,
    },
    fill: {
      type: String,
    },
  },
  setup(props, context) {
    let onChangeChecked = () => {
      context.emit("change", !props.checked);
    };
    return {
      onChangeChecked,
    };
  },
});
</script>

<style lang="scss">
.icon-switch {
  flex: none !important;
}
</style>
